<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>NodeODM - Web UI</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body{
            margin-top: 0;
        }
        #body-row{
            margin-top: 16px;
        }
        .navbar{
            background-color: #3498db;
        }
        a:hover, a:focus, a:active, a{
            color: #3498db;
        }
        #images{
            font-weight: bold;
        }
        #btnSelectFiles, #images{
            display: inline-block;
        }
        .btn-success{
            background-color: #4582ec;
            border-color: #4582ec;
        }
        .btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success:active:hover,
        .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus{
            background-color: #3d74d4;
            border-color: #4582ec;
        }
        .task{
            background: white;
        }
    </style>
    <link rel="stylesheet" href="css/main.css?t=1">

    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="container-fluid">
        <div class="row" id="body-row">
            <div class="col-xs-12 col-sm-4">
                <form enctype="multipart/form-data" onsubmit="return false;">
                    <div id="app">
                        <div id="imagesInput" class="form-group" data-bind="visible: mode() === 'file'">
                            <div id="images">Images and GCP File (optional):</div> <button id="btnSelectFiles" class="btn btn-default btn-sm" data-bind="attr: {disabled: uploading()}">Add Files...</button>
                            <div data-bind="visible: filesCount() && !uploading()">Selected files: <span data-bind="text: filesCount()"></span></div>
                            <div data-bind="visible: uploading()" class="progress" style="margin-top: 12px;">
                                <div class="progress-bar progress-bar-success" role="progressbar" data-bind="text: uploadedFiles() + ' / ' + filesCount() + ' files', style: {width: uploadedPercentage()}">
                                </div>
                            </div>
                            <div data-bind="visible: uploading()" style="min-height: 230px;">
                                <div data-bind="foreach: fileUploadStatus.items">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-info" role="progressbar" data-bind="text: key() + ': ' + parseInt(value()) + '%', style: {width: value() + '%'}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="zipFileInput" class="form-group" data-bind="visible: mode() === 'url'">
                            <label for="zipurl">URL to zip file with Images and GCP File (optional):</label> <input id="zipurl" name="zipurl" class="form-control" type="text" data-bind="attr: {disabled: uploading()}" >
                            <div data-bind="visible: uploading()">
                                Uploading...
                            </div>
                        </div>
                        <div id="errorBlock" data-bind="visible: error().length > 0, click: dismissError">⚠️ <span data-bind="text: error"></span></div>
                        <hr/>
                        <div class="text-right">
                            <!--<input type="button" class="btn btn-info" data-bind="visible: mode() === 'file', click: toggleMode" value="Switch to URL" />
                            <input type="button" class="btn btn-info" data-bind="visible: mode() === 'url', click: toggleMode" value="Switch to File Upload" />
                            -->
                            <input type="submit" class="btn btn-success" data-bind="attr: {disabled: uploading()}, value: uploading() ? 'Uploading...' : 'Start Task', click: startTask" />
                        </div>
                    </div>
                    <div id="options">
                        <div class="form-inline form-group form-horizontal">
                            <div data-bind="visible: error(), text: error()" class="alert alert-warning" role="alert"></div>
                            <button style="position: relative; top: -45px;" type="submit" class="btn btn-default" data-bind="visible: !error(), click: function(){ showOptions(!showOptions()); }, text: (showOptions() ? 'Hide' : 'Show') + ' Options'"></button>

                            <div data-bind="visible: showOptions()">
                                <div>
                                    <label for="taskName">Project Name:</lable> 
                                    <br/>
                                    <input type="text" class="form-control" value="" id="taskName" />
                                    <button type="submit" class="btn glyphicon glyphicon-info-sign btn-info" data-toggle="tooltip" data-placement="top" title="Assign a name to the project." ></button>
                                    <button id="resetTaskName" type="submit" class="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title="Reset to default"  ></button>
                                    <br/><br/>

                                    <label for="doPostProcessing">generate 2D and potree point cloud tiles:</label>
                                    <br/>

                                    
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="doPostProcessing"> Enable
                                        </label>
                                    </div>
                                    <button type="submit" class="btn glyphicon glyphicon-info-sign btn-info" data-toggle="tooltip" data-placement="top" title="Generate 2D and Potree Point Cloud Tiles" ></button>
                                    <button id="resetDoPostProcessing" type="submit" class="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title="Reset to default"  ></button>
                                    
                                    <br/><br/>
                                    
                                </div>

                                <div>
                                    <label for="webhook">webhook callback url (optional):</label>
                                    <br/>
                                     <input id="webhook" name="webhook" class="form-control" type="text">
                                    <button type="submit" class="btn glyphicon glyphicon-info-sign btn-info" data-toggle="tooltip" data-placement="top" title="Optional webhook" ></button>
                                    <button id="resetWebhook" type="submit" class="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title="Reset to default"  ></button>
                                    <br/><br/>
                                </div>

                                <div data-bind="foreach: options">
                                    <label data-bind="text: properties.name + (properties.domain ? ' (' + properties.domain + ')' : '')"></label><br/>
                                    <!-- ko if: properties.type !== 'bool' && properties.type !== 'enum' -->
                                    <input type="text" class="form-control" data-bind="attr: {placeholder: properties.value}, value: value">
                                    <!-- /ko -->
                                    <!-- ko if: properties.type === 'bool' -->
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" data-bind="checked: value"> Enable
                                        </label>
                                    </div>
                                    <!-- /ko -->
                                    <!-- ko if: properties.type === 'enum' -->
                                    <div class="selectBox">
                                        <label>
                                            <select class="form-control" data-bind="options: properties.domain, value: value"></select>
                                        </label>
                                    </div>
                                    <!-- /ko -->
                                    <button type="submit" class="btn glyphicon glyphicon-info-sign btn-info" data-toggle="tooltip" data-placement="top" data-bind="attr: {title: properties.help}"></button>
                                    <button type="submit" class="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title="Reset to default" data-bind="click: resetToDefault"></button>

                                    <br/><br/>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-12 col-sm-8" id="taskList">
                <div data-bind="visible: error() != ''">
                    <div class="alert alert-warning" role="alert" data-bind="text: error()"></div>
                </div>
                <div data-bind="visible: loading()">
                    Loading task list... <span class="glyphicon glyphicon-refresh spinning"></span>
                </div>
                <p data-bind="visible: !loading() && tasks().length === 0">No running tasks.</p>
                <div data-bind="foreach: tasks">
                    <div class="task" data-bind="css: {pulsePositive: info().status && info().status.code === 40, pulseNegative: info().status && info().status.code === 30}">
                        <p data-bind="visible: loading()">Retrieving <span data-bind="text: uuid"></span> ... <span class="glyphicon glyphicon-refresh spinning"></span></p>
                        <div data-bind="visible: !loading() && !info().error">
                            <div class="taskItem"><strong>UUID:</strong>
                                <a data-bind="text: info().uuid, click: openInfo" href="#"></a>
                            </div>
                            <div class="taskItem"><strong>Name:</strong> <span data-bind="text: info().name"></span></div>
                            <div class="taskItem"><strong>Images:</strong> <span data-bind="text: info().imagesCount"></span></div>
                            <div class="taskItem"><strong>Status:</strong> <span data-bind="text: statusDescr()"></span></div>
                            <div class="taskItem"><strong>Time Elapsed:</strong> <span data-bind="text: timeElapsed()"></span></div>
                            <div class="taskItem"><strong>Console Output:</strong> <a href="javascript:void(0);" data-bind="click: viewOutput, visible: !viewingOutput()">View</a><a href="javascript:void(0);" data-bind="click: hideOutput, visible: viewingOutput()">Hide</a> | <a href="#" data-bind="click: downloadOutput">Export</a></a></div>
                            <textarea class="consoleOutput" data-bind="value: output().join('\n'), visible: viewingOutput(), event: {mouseover: consoleMouseOver, mouseout: consoleMouseOut}, attr: {id: 'console_' + uuid}"></textarea>
                            
                            <div data-bind="visible: showDownload()" style="float: left; margin-top: 6px; padding-top: 6px; border-top: 1px solid #eee;">
                                <div class="taskItem"><strong>Download: </strong> <a data-bind="attr: {'href': downloadLink()}">All Assets</a></div>
                            </div>

                            <span data-bind="css: 'statusIcon glyphicon ' + icon()"></span>

                            <div data-bind="visible: info().status && info().status.code === 20" class="progress" style="margin-top: 12px;">
                                <div class="progress-bar progress-bar-info" role="progressbar" data-bind="text: parseInt(info().progress) + '%', style: {width: info().progress + '%'}"></div>
                            </div>

                            <div class="actionButtons">
                                <button data-bind="click: cancel, visible: showCancel()" type="button" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-remove-circle"></span> Cancel
                                </button>

                                <button data-bind="click: restart, visible: showRestart()" type="button" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-play"></span> Restart
                                </button>

                                <button data-bind="click: remove, visible: showRemove()" type="button" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-remove-circle"></span> Remove
                                </button>
                            </div>
                        </div>

                        <!-- Error messages -->
                        <div data-bind="visible: info().error !== undefined">
                            <div class="alert alert-warning" role="alert" data-bind="text: info().error"></div>
                            <div class="actionButtons">
                                <button data-bind="click: remove" type="button" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-remove-circle"></span> Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
    </script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/knockout-3.4.0.js"></script>
    <script src="js/vendor/ko.observableDictionary.js"></script>
    <script src="js/dropzone.js" type="text/javascript"></script>
    <script src="js/main.js?t=2"></script>
</body>

</html>
